<template>
  <div class="tree-item">
    <div
      v-if="deep>1"
      class="item-point-line"
      :style="{
        left:deep*20-28+'px',
        width:tree.children?'10px':'20px'
      }"
    />
    <div class="tree-title" @click="tree.isOpen=!tree.isOpen">
      <div v-if="tree.children" class="tree-open-icon" :style="{left:(deep-1)*20+'px'}">
        <span class="fa" :class="tree.isOpen?'fa-caret-down':'fa-caret-right'" />
      </div>
      <div class="tree-text-warp" :style="{paddingLeft:deep*20+'px'}">
        <div class="tree-text-content">
          <span class="fa" :class="tree.children?'fa-folder-o':'fa-file-text-o'" />
          {{ tree.title }}
        </div>
      </div>
    </div>
    <div v-show="tree.isOpen" v-if="tree.children" class="tree-list">
      <div class="list-point-line" :style="{left:deep*20-10+'px'}" />
      <tree-item v-for="(item,i) in tree.children" :key="i" :deep="deep+1" :tree="item" />
    </div>
  </div>
</template>

<script>
import '../assets/css/font-awesome.min.css'
export default {
  name: 'TreeItem',
  props: {
    tree: {
      type: Object,
      default() {
        return {
          id: 'a1',
          title: '新建文件夹',
          isOpen: true,
          children: [
            {
              id: 'a1-1',
              title: '文档目录',
              isOpen: false,
              children: [
                {
                  id: 'a1-1-1',
                  title: '文档目录',
                  isOpen: false,
                  children: [
                    {
                      id: 'a1-1-1-1',
                      title: '文档'
                    },
                    {
                      id: 'a1-1-1-2',
                      title: '文本'
                    }
                  ]
                },
                {
                  id: 'a1-1-1',
                  title: '文档1'
                },
                {
                  id: 'a1-1-2',
                  title: '文档2'
                }
              ]
            },
            {
              id: 'a1-1',
              title: '文档目录',
              isOpen: false,
              children: [
                {
                  id: 'a1-1-1',
                  title: '文档目录',
                  isOpen: false,
                  children: [
                    {
                      id: 'a1-1-1-1',
                      title: '文档'
                    },
                    {
                      id: 'a1-1-1-2',
                      title: '文本'
                    }
                  ]
                },
                {
                  id: 'a1-1-1',
                  title: '文档1'
                },
                {
                  id: 'a1-1-2',
                  title: '文档2'
                }
              ]
            },
            {
              id: 'a1-2',
              title: '文件1'
            },
            {
              id: 'a1-2',
              title: '文2'
            }
          ]
        }
      }
    },
    deep: {
      type: Number,
      default: 1
    }
  },
  methods: {
    eachTree(tree, func) {
      tree.forEach((item) => {
        func(item)
        if (item.children && item.children.length > 0) {
          this.eachTree(item.children, func)
        }
      })
    },
    getTreeData(data, rootId) {
      const id = 'id'; const parentId = 'pid'
      rootId = rootId || 0
      // 对源数据深度克隆
      const cloneData = JSON.parse(JSON.stringify(data))
      // 循环所有项
      const treeData = cloneData.filter(father => {
        const branchArr = cloneData.filter(child => {
          // 返回每一项的子级数组
          return father[id] === child[parentId]
        })
        branchArr.length > 0 ? father.children = branchArr : ''
        // 返回第一层
        return father[parentId] === rootId
      })
      return treeData !== '' ? treeData : data
    }
  }
}
</script>

<style scoped>
  .tree-item{
    position: relative;
  }
  .tree-title{
    height: 30px;
    font-size: 14px;
    line-height: 30px;
    position: relative;
    cursor: pointer;
  }
  .tree-open-icon{
    position: absolute;
    width: 20px;
    height: 30px;
    left: 0;
    top: 0;
    line-height: 30px;
    text-align: center;
    color: #666666;
  }
  .tree-text-warp{
    font-size: 14px;
    color: #666666;
  }
  .tree-text-warp:hover{
    background-color: rgba(25, 141, 242, 0.09);
  }
  .tree-list{
    position: relative;
  }
  .list-point-line{
    position: absolute;
    display: block;
    width: 1px;
    border-left: 1px dotted #333333;
    left: 10px;
    bottom: 15px;
    top: 0;
  }
  .item-point-line{
    position: absolute;
    display: block;
    height: 1px;
    width: 10px;
    border-top: 1px dotted #333333;
    left: 10px;
    bottom: 15px;
    top: 15px;
  }
</style>
